<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品添加</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/template-web.js"></script>
    <script src="../../js/lay-module/layuimini/miniTab.js"></script>
    <script src="../../frontstatic/js/notify.js"></script>
    <script src="../../frontstatic/js/notify_stand.js"></script>
    <style type="text/css">
        .w-e-text-container {
            height: 500px !important;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-form"
         style="padding-top: 40px;margin-top: 10px; background-color: #FFFFFF;height: auto;border-radius: 15px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品品牌:</label>
                <div class="layui-input-inline">
                    <select id="BrandtextSelect" lay-verify="required">
                        <option></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品类型:</label>
                <div class="layui-input-block">
                    <select id="form_stepselect" lay-verify="required">
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="commodityName" lay-verify="required" placeholder="请填写" type="text"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品售价:</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="price" lay-verify="number" placeholder="请填写金额（人民币）" required type="number" value="">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品库存:</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="stock" lay-verify="number" required  type="number" value="">
                </div>
            </div>
        </div>
        <div class="layui-upload">

            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" id="test2" type="button">选择上传
                </button>
                <div class="layui-upload-list" id="demo2" style="width: auto;height: 100px"></div>
            </blockquote>
        </div>
        <!--富文本编辑器-->
        <div class="layuimini-container" style="height: 600px">
            <div class="layuimini-main">
                <div id="editor" style="margin: 50px 0 50px 0">


                </div>
            </div>
        </div>

    </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" id="submitBtn" lay-filter="formStep" style="display:block;margin:0 auto">
                        &emsp;提交并下一步&emsp;
                    </button>
                </div>
            </div>

</div>
<script id="forword1" type="text/template">
    <option></option>
    {{each datebate1 value}}
    {{if value.upname==null||value.upname==""}}
    <option value={{@value.id}}>{{@value.name}}</option>
    {{else}}
    <option value={{@value.id}}>{{@value.upname}}/{{@value.name}}</option>
    {{/if}}
    {{/each}}
</script>
<script id="BrandSelect" type="text/template">
    {{each BrandData value}}
    <option value="{{value.id}}">{{@value.name}}</option>
    {{/each}}
</script>
<!--文件上传-->
<script type="text/javascript">
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //多图片上传
        //执行实例
        var i = 0;
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            , url: '/imagefile' //上传接口
            , done: function (res) {
                i++;
                //上传完毕回调
                layer.msg(res.msg)
                $('#demo2').append('<img src="' + res.data + '" alt="' + res.data + '" style="width: 100px;height: 95px" class="layui-upload-img">')
                $('#demo2').append('<input class="exampleImage' + i + '" value="' + res.data+ '"style="width: 90px;height: 20px;position: relative;top: 63px;left: -95px" disabled>')
                if (i==6){
                    $('#test2').attr("disabled",true);
                    layer.msg("超过上传数量")
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
    })
</script>
</body>
<script charset="utf-8" src="../../lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" src="../../js/lay-config.js?v=1.0.4"></script>
<script>
    layui.use(['layer', 'wangEditor', 'form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var miniTab = layui.miniTab;
        var $ = layui.jquery;
        var wangEditor = layui.wangEditor;
        $.get("/kind/getList", function (result) {
            date = {datebate1: result.data}
            mera = template("forword1", date);
            $("#form_stepselect").append(mera);
            form.render('select');
        })
        //加载品牌下拉列表框
        $.get("/brand/getList", function (re) {
            date = {BrandData: re.data}
            mera = template("BrandSelect", date);
            $("#BrandtextSelect").append(mera);
            form.render('select');
        })
        var editor = new wangEditor('#editor');
        editor.customConfig.uploadImgServer = "/Textimagefile";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImgFn, result) {
                insertImgFn(result.data[0].url)
            }
        };
        editor.customConfig.customAlert = function (info) {
            layer.msg(info);
        };
        editor.create();

        $("#submitBtn").on('click', function () {
            var exampleImage1 = $(".exampleImage1").val()
            var exampleImage2 = $(".exampleImage2").val()
            var exampleImage3 = $(".exampleImage3").val()
            var exampleImage4 = $(".exampleImage4").val()
            var exampleImage5 = $(".exampleImage5").val()
            var exampleImage6 = $(".exampleImage6").val()
            var BrandtextSelect = $("#BrandtextSelect").val()
            var formStepselect = $("#form_stepselect").val()
            var commodityName = $("#commodityName").val()
            var stock=$("#stock").val()
            var price = $("#price").val()
            var allText = editor.txt.html()
            if (BrandtextSelect == "" && formStepselect == "" && commodityName == "" && price == "") {
                layer.msg("必选项不能为空")
            }else {
                var commodity={
                    "name":commodityName,
                    "price":parseFloat(price).toFixed(2) ,
                    "kindId":formStepselect,
                    "brandId":BrandtextSelect,
                    "stock":stock,
                    "exampleImage1":exampleImage1,
                    "exampleImage2":exampleImage2,
                    "exampleImage3":exampleImage3,
                    "exampleImage4":exampleImage4,
                    "exampleImage5":exampleImage5,
                    "exampleImage6":exampleImage6,
                    "allText":allText
                }
                $.ajax({
                    type : "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(commodity),
                    dataType: "json",
                    url:"/commodity/insert",
                    async : true,
                    success : function(date){
                        if (date.code==0) {
                            notify.success(date.msg)
                            miniTab.openNewTabByIframe({
                                href: "addLayuisku/index.html",
                                title: "商品规格添加",
                            });
                        }else {
                            notify.error(date.msg)
                        }
                    }
                })
            }
        })
    })
</script>
</html>